<template>
  <div>父组件</div>
  <div>姓名:{{ username }}</div>
  <div>年龄:{{ age }}</div>
  <button @click="setAge">修改年龄</button>
</template>
<script setup>
import { reactive, toRefs } from 'vue'

/*
  toRefs:将某对象内的所有属性转换成ref数据格式，保持响应式
  用法
    a:导入  import {toRefs} from 'vue'
    b:使用
       const {解构属性名}=toRefs(需要转换的对象{a:1,b:2})={a:{value:1},b:{value:2}}

*/

const form = reactive({
  username: '张三',
  age: 18
})
let { username, age } = toRefs(form)
const setAge = () => {
  age.value++
  console.log(age.value)
}
</script>
